<template>
<!--    <div>-->
<!--        <el-row :gutter="20">-->
<!--            <el-col :xl="12">-->
<!--                <h1 style="font-size: 50px;margin-top: 20vh;text-align: center;">{{ time }}</h1>-->
<!--            </el-col>-->
<!--            <el-col :xl="12">-->
<!--                <el-calendar></el-calendar>-->
<!--            </el-col>-->
<!--        </el-row>-->
<!--    </div>-->
   <div>
       <iframe src="/goaccess" frameborder="0" width="100%" height="100%" id="bdIframe" v-if="!this.$ENABLE_CUSTOMER && !limitUser"></iframe>
       <el-card shadow="hover" style="width: 400px;" v-else>
           <div slot="header" class="clearfix">
               <span>文嘉《明日歌》</span>
               <el-button style="float: right; padding: 3px 0" type="text" @click="clickFn">暂停</el-button>
           </div>
           <div style="font-size: 18px;text-align: center; ">明日复明日</div>
           <div style="font-size: 18px;text-align: center;">明日何其多</div>
           <div style="font-size: 18px;text-align: center;">我生待明日</div>
           <div style="font-size: 18px;text-align: center;">万事成蹉跎</div>
           <div style="margin-top: 40px;"></div>
           <el-statistic
               ref="statistic"
               @finish="hilarity"
               format="HH:mm:ss"
               :value="deadline"
               title="距离明日："
               time-indices
           >
           </el-statistic>
       </el-card>
   </div>
</template>
<script>
    export default {
        components:{

        },
        data () {
            return {
                time: '',
                interval: null,
                currentShow: !this.$ENABLE_CUSTOMER,

                deadline: Date.now() + (new Date().setHours(23, 59, 59) - Date.now()),
            }
        },
        computed: {
            // 受限的用户
            limitUser () {
                return this.$store.state.manager.info.sources && this.$store.state.manager.info.sources.length;
            },
        },
        watch: {
            '$route' (val) {
                this.currentShow = val.name === 'dashboard' && !this.$ENABLE_CUSTOMER;
                // if (val.name === 'dashboard') {
                //     this.makeInterval();
                // } else {
                //     this.clearInterval();
                // }
            }
        },
        methods: {
            hilarity() {
                this.$notify.info({
                    title: '提示',
                    message: '时间已到，你可知寸金难买寸光阴？',
                    duration: 15000,
                    onClose: () => {
                        this.deadline = Date.now() + (new Date().setHours(23, 59, 59) - Date.now());
                    }
                });
            },
            clickFn() {
                this.$refs.statistic.suspend(this.stop);
                this.stop = !this.stop;
            },
            onResize() {
                if (!this.currentShow) return ;

                const oIframe = document.getElementById('bdIframe');
                const deviceWidth = document.getElementsByClassName('el-main')[0].offsetWidth;
                const deviceHeight = document.getElementsByClassName('el-main')[0].clientHeight;
                //console.log(document.documentElement.clientWidth)
                oIframe.style.width = (Number(deviceWidth) - 57) + 'px'; //数字是页面布局宽度差值
                oIframe.style.height = (Number(deviceHeight) - 70) + 'px'; //数字是页面布局高度差
            }
        },
        created() {
            // this.makeInterval();
            this.$nextTick(() => {
                window.addEventListener("resize", this.onResize);
                this.onResize();
            });
        },
        destroyed() {
            window.removeEventListener('resize', this.onResize)
        }
    }
</script>

<style scoped>

</style>
